<template>
	<view>
		<view
			v-for="(item, index) in questionList"
			:key="index"
			@click="handleClick(item.code)">
			<view
				v-if="!result"
				:class="['select-item', values.includes(item.code) ? 'checked' : '']">
				<text>{{item.code}}</text>
				<text class="text">{{item.name}}</text>
			</view>
			<view v-else-if="correctList.includes(item.code)" class="select-item success">
				<text>{{item.code}}</text>
				<text class="text">{{item.name}}</text>
			</view>
			<view v-else-if="errorList.includes(item.code)" class="select-item error">
				<text>{{item.code}}</text>
				<text class="text">{{item.name}}</text>
			</view>
			<view v-else class="select-item">
				<text>{{item.code}}</text>
				<text class="text">{{item.name}}</text>
			</view>
		</view>
		<view class="submit-button" v-if="!result && type == 'multiple' && !submit">
			<u-button type="primary" shape="circle" text="提交答案" @click="handleSubmit"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		type: {
			type: String,
			require: true
		},
		result: String,
		questionList: {
			type: Array,
			require: true
		},
		answerList: Array,
		correctAnswerList: Array
	},
	data() {
		return {
			values: [],
			submit: false
		}
	},
	computed: {
		errorList() {
			if (this.answerList && this.correctAnswerList) {
				return this.answerList.filter(answer => !this.correctAnswerList.includes(answer))
			}
			return []
		},
		correctList() {
			if (this.answerList && this.correctAnswerList) {
				return this.answerList.filter(answer => this.correctAnswerList.includes(answer))
			}
			return []
		}
	},
	methods: {
		handleClick(code) {
			if (this.submit) {
				return
			}
			if (this.values.includes(code)) {
				this.values = this.values.filter(value => value !== code)
			} else {
				this.values.push(code)
			}
			if (this.type == 'single' && this.values.length > 0) {
				this.submit = true
				this.$emit('submit', this.values)
				return
			}
		},
		handleSubmit() {
			if (this.values.length === 0) {
				this.$toast('请选择答案！')
				return
			}
			this.$emit('submit', this.values)
			this.submit = true
		}
	}
}
</script>
<style lang="scss" scoped>
	.select-item {
		margin-top: 20rpx;
		padding: 30rpx;
		border: 3rpx solid $uni-text-color-disable;
		border-radius: 5px;
		font-size: 30rpx;
		.text {
			padding-left: 20rpx;
		}
	}
	.checked {
		color: $lego-theme;
		background-color: rgba(0, 122, 255, 0.2);
		border: 3rpx solid rgba(0, 122, 255, 0.5);
	}
	.error {
		color: $uni-color-error;
		background-color: rgba(221, 82, 77, 0.2);
		border: 3rpx solid rgba(221, 82, 77, 0.5);
	}
	.success {
		color: $uni-color-success;
		background-color: rgba(76, 217, 100, 0.2);
		border: 3rpx solid rgba(63, 184, 83, 0.5);
	}
	.submit-button {
		padding: 30rpx 0rpx 0rpx;
	}
</style>